<template>
  <!-- 全局表 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="globalDataList" @query="getGlobalList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="游戏类型:" label-width="90px">
            <el-select v-model="listQuery.game_id" placeholder="请选择游戏类型" filterable >
              <el-option label="公共数据" :value="0" ></el-option>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in GAME_TYPE" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="全局表Id:" label-width="90px">
            <el-input-number :min="0" :max="999999999" :precision="0" v-model="listQuery.a_base_global_id" controls-position="right" clearable placeholder="请输入全局表Id"></el-input-number>
          </el-form-item>
          <el-form-item label="全局表备注:" label-width="90px">
            <el-input type="text" v-model="listQuery.a_global_remark" clearable placeholder="请输入备注"></el-input>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="primary" v-permission="'global.add'" size="mini" icon="el-icon-plus" @click="(isShowDetails = true),(checkedItem = null)">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getGlobalList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ "" }}</el-radio>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="id" label="ID" width="80" /> -->
          <el-table-column align="center" prop="a_base_global_id" label="全局表ID" width="120"/>
          <el-table-column align="center" prop="a_global_remark" label="备注" width="400"/>
          <el-table-column align="center" prop="a_global_parameter" label="配置内容" />
          <el-table-column align="left" prop="operation" label="操作" width="200">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'global.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline" /></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'global.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click.stop="deleteItem(scope.row)"><i class="el-icon-delete" /></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getGlobalList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" :gameType="listQuery.game_id"/>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getGlobal,
  delGlobal,
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'global',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      GAME_TYPE,
      globalDataList: [],
      checkedItem: null,
      listLoading: false,
      isShowDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
        game_id:1,
        a_base_global_id:'',
        a_global_remark:'',
      },
    }
  },
  created () {
    // this.getGlobalList()
  },
  activated () {
    this.getGlobalList()
  },
  methods: {
    // 获取全局表
    async getGlobalList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.globalDataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getGlobal(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.globalDataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 编辑
    editItem (row) {
      let that = this;
      that.checkedItem = row
      that.handleCurrentChange(row)
      that.isShowDetails = true
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${row.a_global_parameter}】全局配置`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delGlobal({
          id: row.id
        }).then(function (res) {
          that.getGlobalList()
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => { });
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.globalDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        this.getGlobalList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        game_id:1,
        a_base_global_id:'',
        a_global_remark:'',
      }
      this.getGlobalList('');
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
